<template>
    <div class="forum-list-wrap">
        <div class="banner">
            <el-carousel height="5.5rem">
                <el-carousel-item v-for="(item,index) in bannerList" :key="index">
                    <div class="banner-img" @click="clickBannerFun(item)">
                        <img :src="item.image" alt="" />
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="m-cagegory">
            <div class="m-tab">
                <div
                    class="m-tab-item"
                    :class="{ 'm-tab-item--active': tabCurrent == index }"
                    @click="selectTabFun(item, index)"
                    v-for="(item, index) in tabList"
                    :key="index"
                >
                    {{ item.title }}
                </div>
            </div>
        </div>

        <div class="list">
            <KnowItem v-for="(item, index) in list" :item="item" :key="index"></KnowItem>
        </div>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="total" @current-change="paginationFun">
            </el-pagination>
        </div>

    </div>
</template>

<script>
import KnowItem from "./pageComponents/know-item.vue";

import {getBanner} from "@/api/common";
import {getArticleList,getType} from "@/api/know";
export default {
    components: {
        KnowItem,
    },
    data() {
        return {
            bannerList: [],
            tabList: [],
            tabCurrent: 0,
            params:{
                page:1,
                limit:10,
                type_id:''
            },
            list:[],
            total:0
        };
    },
    mounted() {
        this.getBannerFun();
        this.getTypeFun();
        this.getListFun()
    },
    methods: {
        getBannerFun() {
            getBanner().then(res => {
                this.bannerList = res.data
            })
        },
        clickBannerFun(item){
            if(item.url){
                window.location.href = item.url
            }
        },
        selectTabFun(item, index) {
            this.tabCurrent = index;
            this.params.type_id = item.id
            this.getListFun()
        },
        getTypeFun() {
            getType().then(res => {
                if(res.code == 200){
                    let list = res.data || []
                    list.unshift({
                        id:0,title:'全部'
                    })
                    this.tabList = list
                }
            })
        },
        paginationFun(page){
            this.params.page = page
            this.getListFun()
        },
        getListFun(){
            getArticleList(this.params).then(res => {
                if(res.code == 200){
                    this.list = res.data.list || []
                    this.total = res.data.count || 0
                }
            })
        }
    },
};
</script>

<style lang="less" scoped>
.forum-list-wrap {
    .banner {
        width: 100%;
        height: 5.5rem;
        .banner-img {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .m-cagegory {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 1rem;
        background: rgba(79, 138, 248, 0.1);
        margin-top: 0.4rem;
        box-sizing: border-box;
        padding: 0 0.5rem 0 0;
        .push {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.5rem;
            height: 0.5rem;
            background: #4f8af8;
            border-radius: 0.1rem;
            font-size: 0.2rem;
            color: #fff;
            cursor: pointer;
            user-select: none;
        }
        .m-tab {
            display: flex;
            width: 100%;
            height: 100%;
            overflow-x: scroll;
            &::before {
                content: "";
                display: block;
                width: 0.125rem;
                height: 100%;
            }
            &::-webkit-scrollbar {
                height: 0;
                border-radius: 0.025rem;
                background: rgba(0, 0, 0, 0.1);
            }
            &::-webkit-scrollbar-thumb {
                background: #4f8af8;
            }
            .m-tab-item {
                display: flex;
                align-items: center;
                padding: 0 0.375rem;
                font-size: 0.3rem;
                color: #333;
                flex-shrink: 0;
                height: 100%;
                cursor: pointer;
                user-select: none;
            }
            .m-tab-item--active {
                font-weight: 800;
            }
        }
    }

    .list {
        padding-top: 0.5rem;
    }
    .pagination {
        display: flex;
        justify-content: center;
        padding: 0.375rem 0 1rem;
    }
}
</style>